<template>
  <div class="q-table">
    <div class="q-table-fixed" v-if="headerFixed">
      <table-header
        :columns="columns"
        @filter="handleFilter(arguments[0].filter, arguments[0].column)"
        @order="handleOrder(arguments[0].order, arguments[0].column)"
      ></table-header>
      <table-body :stripe="stripe" :columns="columns" :data="data"></table-body>
    </div>
    <slot v-else>
      <table>
        <slot name="header" v-if="showHeader">
          <thead>
            <tr>
              <th style="text-align: center"
                v-for="(column, index) in columns"
                :key="column.name || index"
                :style="{
                  width: column.width? column.width:(100/columns.length)+'vw',
                }"
              >
                <slot name="th" :column="column">
                  {{ column.title || column.name }}
                  <!-- <table-filter v-if="column.filters" :filters="column.filters" :value="filterValue[column.name]" :parse="filterParse" @select="handleFilter(arguments[0], column)"></table-filter> -->
                  <table-order
                    v-if="column.order"
                    :order="column.order"
                    @order="handleOrder(arguments[0], column)"
                  ></table-order>
                </slot>
              </th>
            </tr>
          </thead>
        </slot>
        <slot name="body">
          <tbody :class="[{
      'striped': stripe,
      }]">
            <tr :class="[{ 'current-row': stripe&&index%2==0 }]" v-for="(row, index) in data" :key="row.rowkey || index">
              <td v-for="(col, idx) in columns" :key="col.name || idx"
              >
                <slot name="td" :row="row" :column="col">
                 {{
                    col.parse
                      ? col.parse(col, row)
                      : col.name
                      ? row[col.name]
                      : row[idx]
                  }}
                </slot>
              </td>
            </tr>
          </tbody>
        </slot>
      </table>
      <slot name="empty">
        <table-empty v-if="!data.length">{{ emptyText }}</table-empty>
      </slot>
    </slot>
  </div>
</template>

<script>
import "./table.scss"
import TableHeader from './table-header';
import TableBody from './table-body';
// import TableFilter from './table-filter';
import TableOrder from './table-order';
import TableEmpty from './table-empty';

export default {
  name: 'qTable',
  components: {
    TableHeader,
    TableBody,
    // TableFilter,
    TableOrder,
    TableEmpty
  },
  props: {
    stripe: {
      type: Boolean,
      default() {
        return true;
      }
    },
    data: {
      type: Array,
      default() {
        return [];
      }
    },
    columns: {
      type: Array,
      default() {
        return [];
      }
    },
    showHeader: {
      type: Boolean,
      default: true
    },
    rowKey: {
      type: String,
      default: ''
    },
    filterValue: {
      type: Object,
      default() {
        return {};
      }
    },
    filterParse: {
      type: Function,
      default(item) {
        return item.title;
      }
    },
    headerFixed: {
      type: Boolean,
      default: false
    },
    emptyText: {
      type: String,
      default: '暂无数据'
    }
  },
  methods: {
    handleOrder(order, column) {
      this.$emit('order', { order, column });
    },
    handleFilter(filter, column) {
      this.$emit('filter', { filter, column });
    }
  }
};
</script>
